<!--
- Author:  LiShibin.
- Date:    2017/7/17 0017.
- File:    index.
-->
<template>
  <div class="Web_Box">
    <div @click="back" class="Topmenu"><i class="iconfont icon-youjiantou"><a href=""></a></i>
      <h1>设置</h1>
      <span></span>
    </div>
    <div class="qjdy">
      <div class="gerenxinxi">
        <ul>
          <li style="padding: 0.4rem 0;position: relative;height: 2.8rem;">
            <p style="position: absolute;height: 2rem;width: 100%;z-index: 10;background-color: #fff;pointer-events: none;">
              头像 <i class="iconfont icon-youjiantou-copy"></i>
              <span><img id="headImg" :src="memberInfo.member_avatar || '../../assets/images/avatar.png'" alt=""></span>
            </p>
            <input type="file" accept="image/jpeg,image/jpg,image/png,image/gif" class="file-input" @change="fileSelected($event)">
          </li>
          <li @click="gotoEdit">
            <p>昵称 <i class="iconfont icon-youjiantou-copy"></i>
              <span>{{memberInfo.member_name}}</span>
            </p>
          </li>
          <li @click="goModifyMobile">
            <p>手机 <i class="iconfont icon-youjiantou-copy"></i>
              <span>{{memberInfo.member_mobile}}</span>
            </p>
          </li>
          <li @click="goAddrList">
            <p>收件地址 <i class="iconfont icon-youjiantou-copy"></i>
              <span></span>
            </p>
          </li>
        </ul>
        <ul>
          <li @click="gotoMemberBank" data-router="member-bank">我的银行卡<i class="iconfont icon-youjiantou-copy"></i><span></span></li>
        </ul>
        <ul>
          <li>会员<i class="iconfont icon-youjiantou-copy"></i><span>{{memberInfo.level | vipLevelName()}}</span></li>
        </ul>
      </div>
    </div>
    <div class="logout-cont">
      <button type="button" class="logout-btn" @click="signOut" v-show="$utils.getDeviceType != 'wx-Android' && $utils.getDeviceType != 'wx-iPhone'">退出登录</button>
    </div>
    <!--alloycrop 的mask遮罩层-->
    <div v-show="showCrop" class="crop-mask"></div>
  </div>
  <!--<div>-->
    <!--<div class="nav_list2  bg_fff hidden pl20 pr20 bor_b_dcdddd">-->
      <!--<ul>-->
        <!--<li class="h114"><span class="fl lefttext">头像</span>-->
          <!--<div class="fr photo"><img :src="memberInfo.member_avatar" alt=""/></div>-->
        <!--</li>-->
        <!--<li class="h90">-->
          <!--<a href="javascript:void(0)" @click="gotoEdit">-->
            <!--<span class="disb hidden">-->
              <!--<span class="fl lefttext">昵称</span>-->
              <!--<i class="fr iconfont icon-rightdot"></i>-->
              <!--<span type="text" class="fr">{{memberInfo.member_name}}</span>-->
              <!--<span class="examine" style="float: right; margin-right: 10px;" v-show="memberInfo.rename_state == '1'">审核中</span>-->
            <!--</span>-->
          <!--</a>-->
        <!--</li>-->
        <!--<li class="h90" v-show="false">-->
          <!--<router-link :to="{name: 'setting-password'}">-->
            <!--<span class="disb hidden">-->
            <!--<span class="fl lefttext">修改密码</span>-->
            <!--<i class="fr iconfont icon-rightdot"></i>-->
          <!--</span>-->
          <!--</router-link>-->
        <!--</li>-->
      <!--</ul>-->
    <!--</div>-->
    <!--&lt;!&ndash;<div class="pl20 pr20 mt35" v-show="$utils.getDeviceType() != 'weixin'">&ndash;&gt;-->
    <!--<div class="pl20 pr20 mt35">-->
      <!--<button type="button" class="but_1 wauto" @click="signOut">退出登录</button>-->
    <!--</div>-->
    <!--<back-nav></back-nav>-->
  <!--</div>-->
</template>

<script>
  import {mapModules, mapRules} from 'vuet'
  import AlloyCrop from 'alloycrop'
  export default{
    mixins: [
      mapModules({memberInfo: 'memberInfo'}),
      mapRules({need: 'memberInfo'})
    ],
    data() {
      return {
        result: null,
        areaStr: '',
        showCrop: false,
        uploadImg: false  // 图片上传中
      }
    },
    created() {
      console.log(this.memberInfo)
    },
    methods: {
      back() {
        this.$router.go(-1)
      },
      goAddrList() {
        this.$router.push({name: 'address-list'})
      },
      gotoMemberBank() {
        this.$router.push({name: 'member-bank'})
      },
      gotoEdit() {
        this.$router.push({name: 'setting-name'})
      },
      goModifyMobile() {
        this.$router.push({name: 'modify-mobile'})
      },
      fileSelected(e) {
        if (this.uploadImg) {
          return
        } else {
          this.uploadImg = true
        }
        try {
          var reader = new window.FileReader()
          reader.onload = (e) => {
            if (e.total > 1024 * 1024 * 10) {
              this.$toast('头像不能超过10M！')
              return
            }
            this.showCrop = true
            var _this = this
            console.log('img read ok') // alloy-crop.js 64行 Transform Transform.default()
            new AlloyCrop({ // eslint-disable-line
              image_src: reader.result,
              width: 200,
              height: 200,
              output: 2,
              ok: function (base64, canvas) {
                var toastInstance = _this.$toast({message: '图片上传中…', duration: -1})
                _this.$request.upgradeHeadImg(base64).then(data => {
                  _this.memberInfo.member_avatar = data
                  toastInstance.close()
                  // document.getElementById('headImg').src = base64
                  _this.$toast('上传图片成功！')
                  _this.uploadImg = false
                }).catch(e => {
                  toastInstance.close()
                  _this.$toast('上传图片失败:' + e.msg)
                  _this.uploadImg = false
                })
                setTimeout(() => {
                  _this.showCrop = false
                })
              },
              cancel: function () {
                _this.uploadImg = false
                setTimeout(() => {
                  _this.showCrop = false
                })
              },
              ok_text: '确定',
              cancel_text: '取消'
            })
            // 调用图片压缩方法
            // console.log("成功加载图片，开始压缩图片...")
            // this.$indicator.open(this.$store.getters.lang['handing'])
            // this.$utils.compress(e.target.result, (imgDataUrl) => {
            //   // todo 调用上传图片接口
            //   // document.getElementById(imgFlagId).setAttribute('src', imgDataUrl)
            //   // this.$request.uploadImg(imgDataUrl, '2').then(data => {
            //   //   // let src = this.$config.imgsite + this.$config.voucherImgSrc + data[0]
            //   //   // console.log('src', src)
            //   //   // document.getElementById(imgFlagId).setAttribute('src', src)
            //   //   this.img = data[0]
            //   // }).catch(e => {
            //   //   this.$toast('上传图片失败:' + e.msg)
            //   // }).finally(() => {
            //   //   this.$indicator.close()
            //   // })
            // })
          }
          // 选取同名文件不会再次触发change事件，所以在加载后替换input控件
          // reader.onloadend = (e) => {
            // this.clearInputFile()
          // }
          reader.readAsDataURL(e.target.files[0])
        } catch (e) {
          this.uploadImg = false
          console.log('读取图片文件发生了错误')
          console.log(e)
        }
      },
      signOut() {
        this.$storage.delKey()
        this.$storage.setAuthed(false)
        this.$storage.delMemberInfo()
        this.$router.replace({name: 'home'})
        this.$utils.delCookie('key')
      }
    }
  }
</script>

<style>
  .gerenxinxi img{border-radius: 50%;}
  .gerenxinxi ul li i {color: #c4c4c4}
  .logout-cont{position: fixed;bottom: 120px;left:0;width: 100%;padding: 0 10px;}
  .logout-cont .logout-btn{width: 100%;height: 1.75rem;border-radius: 25px;background-color: #fff;font-size: 14px;
    border: 1px solid #ddd;color: #555;}
  .file-input{position: absolute;top:0.42rem;bottom: 0.42rem;width: 100%;z-index: 1;}
  .crop-mask{position: fixed;z-index: 90;top:0;right:0;bottom:0;left: 0;background-color: #ccc;}
</style>
